<template>
  <div class="sidebar">
    <div class="sidebar-container">
      <div class="title-group">
        <div class="search-group">
          <input class="input-field" type="text">
          <i class="icon icon-search"></i>
        </div>
        <a class="btn-set" @click="addGroupDialog()">
          <i class="icon icon-add"></i>新建分组
        </a>
        <a class="btn-set">
          <i class="icon icon-refresh"></i>刷新
        </a>
      </div>
      <div class="sidebar-header">
        <span class="id">云机ID</span>
        <span class="app">应用</span>
        <span class="status">状态</span>
      </div>
      <div class="sidebar-body">
        <div class="sidebar-menu">
          <div class="menu-item" v-for="group in phoneGroup" @click="showTreeview(group.id)">
            <div class="item-title" v-bind:class="{'active':currentId == group.id}">
              <i
                class="icon"
                v-bind:class="{ 'icon-shrink': currentId != group.id,'icon-open': currentId == group.id }"
              ></i>
              <span class="item-name">{{group.name}}</span>
              <span class="item-count">
                (
                <strong class="red">{{group.count}}</strong> )
              </span>
              <span class="item-icon">
                <i class="icon icon-add" title="增加云机" @click="addPhoneDialog($event)"></i>
                <i class="icon icon-edit" title="编辑云机"></i>
                <i class="icon icon-delete" title="删除分组"></i>
              </span>
            </div>
            <div
              class="menu-treeview"
              v-if="group.lis.length > 0 && currentId == group.id"
              @click="stopPropagation($event)"
            >
              <div class="treeview-li" v-for="li in group.lis">
                <input class="li-check" type="checkbox">
                <span class="li-name">{{li.name}}</span>
                <span class="li-remark text-inline gray" @click="changeRemark()">sssssssssssss</span>
                <span class="li-app">ss</span>
                <i class="icon icon-status"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sidebar-footer">
        已选中
        <span class="text-star">0</span>台手机
      </div>
    </div>
    <ChangeRemarkDialog v-if="changeRemarkDialog"></ChangeRemarkDialog>
  </div>
</template>

<script>
import ChangeRemarkDialog from "./dialog/ChangeRemarkDialog";
export default {
  components: {
    ChangeRemarkDialog
  },
  data() {
    return {
      currentId: null,
      phoneGroup: [
        {
          id: 1,
          name: "未分组",
          count: 3,
          lis: [
            { id: 11, name: "1111" },
            { id: 11, name: "1111" },
            { id: 12, name: "2222" },
            { id: 11, name: "1111" },
            { id: 12, name: "2222" },
            { id: 12, name: "2222" },
            { id: 11, name: "1111" },
            { id: 12, name: "2222" },
            { id: 13, name: "3333" }
          ]
        },
        {
          id: 2,
          name: "仙玩",
          count: 3,
          lis: [
            { id: 22, name: "5555" },
            { id: 21, name: "4444" },
            { id: 22, name: "5555" },
            { id: 22, name: "5555" },
            { id: 21, name: "4444" },
            { id: 22, name: "5555" },
            { id: 22, name: "5555" },
            { id: 22, name: "5555" },
            { id: 23, name: "6666" },
            { id: 22, name: "5555" },
            { id: 22, name: "5555" },
            { id: 21, name: "4444" },
            { id: 22, name: "5555" },
            { id: 22, name: "5555" },
            { id: 22, name: "5555" },
            { id: 23, name: "6666" },
            { id: 22, name: "5555" },
            { id: 22, name: "5555" },
            { id: 22, name: "5555" },
            { id: 23, name: "6666" },
            { id: 22, name: "5555" }
          ]
        },
        {
          id: 3,
          name: "梦幻Q仙",
          count: 3,
          lis: [
            { id: 22, name: "5555" },
            { id: 21, name: "7777" },
            { id: 22, name: "5555" },
            { id: 22, name: "8888" },
            { id: 21, name: "7777" },
            { id: 22, name: "5555" },
            { id: 22, name: "8888" },
            { id: 22, name: "5555" },
            { id: 23, name: "9999" }
          ]
        },
        {
          id: 4,
          name: "斗破苍穹",
          count: 4,
          lis: [
            { id: 21, name: "7777" },
            { id: 22, name: "5555" },
            { id: 22, name: "8888" },
            { id: 21, name: "7777" }
          ]
        }
      ]
    };
  },
  created() {},
  methods: {
    //防止冒泡
    stopPropagation(event) {
      event.stopPropagation();
    },
    //显示增加云机
    addPhoneDialog(event) {
      event.stopPropagation();
      this.$store.commit("setDialogStatus", {
        dialog: "addPhoneDialog",
        isBoolean: true
      });
    },
    //显示增加组
    addGroupDialog() {
      this.$store.commit("setDialogStatus", {
        dialog: "addGroupDialog",
        isBoolean: true
      });
    },
    //展开菜单
    showTreeview(id) {
      if (this.currentId == id) {
        this.currentId = null;
      } else {
        this.currentId = id;
      }
    },
    //修改云机备注
    changeRemark() {
      this.$store.commit("setDialogStatus", {
        dialog: "changeRemarkDialog",
        isBoolean: true
      });
    }
  },
  computed: {
    changeRemarkDialog() {
      return this.$store.state.changeRemarkDialog;
    }
  }
};
</script>

<style lang="scss" scoped>
$primary: #007bff;
$primary-hover: rgba(82, 168, 236, 0.3);
$white-light: #f5f6f7;
$gray-border: #c3c6c9;
$greent-light: #28a745;
.sidebar {
  position: relative;
  width: 280px;
  height: 100%;
}
.sidebar-container {
  position: relative;
  width: 280px;
  height: 100%;
}
.title-group {
  position: relative;
  width: 280px;
  height: 50px;
  padding-top: 10px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid $gray-border;
  .search-group {
    position: relative;
    height: 30px;
    margin-left: 11px;
    width: 115px;
    .input-field {
      box-sizing: border-box;
      border-radius: 3px;
      width: 115px;
      height: 30px;
      padding-right: 25px;
      padding-left: 5px;
      line-height: 30px;
      border: 1px solid #cccccc;
      &:hover {
        border: none;
        padding-left: 6px;
        padding-right: 26px;
        box-shadow: 0 0 8px $gray-border;
      }
      &:focus {
        outline: none;
      }
    }
    .icon-search {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 0;
      top: 2px;
      cursor: pointer;
      &:before {
        content: "\e6e3";
        color: $gray-border;
        font-size: 16px;
      }
    }
  }
  .btn-set {
    display: flex;
    cursor: pointer;
    height: 26px;
    line-height: 26px;
    margin-left: 11px;
    margin-top: 2px;
    padding: 0 5px;
    font-size: 12px;
    border-radius: 5px;
    background-color: $white-light;
    border: 1px solid $gray-border;
    &:hover {
      background-color: #fafbfc;
    }
    .icon-add,
    .icon-refresh {
      margin-right: 2px;
      line-height: 20px;

      &:before {
        font-size: 8px;
      }
    }
    .icon-add:before {
      content: "\e60c";
    }
    .icon-refresh:before {
      content: "\e65e";
    }
  }
}
.sidebar-header {
  position: relative;
  width: 280px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  display: flex;
  border-bottom: 1px solid $gray-border;
  .id {
    margin-left: 30px;
  }
  .app {
    margin-left: 90px;
  }
  .status {
    margin-left: 10px;
  }
}
.sidebar-footer {
  position: absolute;
  width: 280px;
  height: 40px;
  line-height: 40px;
  text-align: left;
  padding-left: 10px;
  bottom: 0;
  font-size: 14px;
  background-color: #f0f6f5;
  .text-star {
    font-size: 18px;
    color: red;
  }
}
.sidebar-body {
  height: calc(100% - 120px);
  width: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-menu {
  width: 280px;
}
.item-title {
  position: relative;
  display: flex;
  padding: 5px;
  &:hover,
  &.active {
    background-color: $white-light;
    .item-icon {
      display: inline-block;
    }
  }
  .icon-shrink,
  .icon-open {
    margin-right: 2px;
    line-height: 23px;
    font-size: 12px;
  }
  .icon-shrink:before {
    content: "\e645";
  }
  .icon-open:before {
    content: "\e644";
  }
  .item-count {
    margin-left: 5px;
  }
  .item-icon {
    position: absolute;
    display: none;
    right: 0;
    padding-right: 18px;
    .icon-add:before {
      content: "\e60c";
    }
    .icon-edit:before {
      content: "\e609";
    }
    .icon-delete:before {
      content: "\e65b";
    }
    .icon-add,
    .icon-edit,
    .icon-delete {
      cursor: pointer;
      margin-right: 8px;
      line-height: 23px;
      &:before {
        color: $primary;
        font-size: 10px;
      }
    }
  }
}
.menu-treeview {
  .treeview-li {
    position: relative;
    display: flex;
    padding: 5px 0 5px 7px;
    &:hover {
      background-color: $primary-hover;
    }
    .li-check {
      margin-top: 5px;
      width: 15px;
      height: 15px;
    }
    .li-name {
      margin-left: 8px;
    }
    .li-remark {
      cursor: pointer;
      margin-left: 5px;
      width: 70px;
    }
    .red {
      font-size: 14px;
    }
    .li-app {
      position: absolute;
      left: 167px;
    }
    .icon-status {
      position: absolute;
      left: 208px;
      color: $greent-light;
      &:before {
        content: "\e601";
        font-size: 12px;
      }
    }
  }
}
</style>